import {Layout} from '../../../src/Layout';
export default Layout;

import '../../../tailwind/tailwind.css';
import {ComponentList} from '../../../src/ComponentCard';

export const hideNav = true;
export const isSubpage = true;
export const section = 'Examples';
export const keywords = ['react-aria', 'example', 'tabs', 'tailwind'];
export const description = 'With CSS scroll snapping, scroll-driven animations, and anchor positioning.';

# Swipeable Tabs

<PageDescription>A swipeable [Tabs](../Tabs) component with [CSS scroll snapping](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap), [scroll-driven animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations), and [anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning).</PageDescription>

```tsx render dir="react-aria/examples" files={['packages/dev/s2-docs/pages/react-aria/examples/TabSelectionIndicator.tsx', 'packages/dev/s2-docs/pages/react-aria/examples/TabPanelCarousel.tsx', 'packages/dev/s2-docs/pages/react-aria/examples/Tabs.tsx', 'packages/dev/s2-docs/pages/react-aria/examples/TabList.tsx', 'packages/dev/s2-docs/pages/react-aria/examples/Tab.tsx', 'packages/dev/s2-docs/pages/react-aria/examples/TabPanel.tsx']} type="tailwind" expanded
"use client";
import {Tabs} from './Tabs';
import {TabList} from './TabList';
import {Tab} from './Tab';
import {TabPanel} from './TabPanel';
import {TabSelectionIndicator} from './TabSelectionIndicator';
import {TabPanelCarousel} from './TabPanelCarousel';

<Tabs className="w-[400px] max-w-full">
  <TabList aria-label="Tabs">
    <Tab id="home">Home</Tab>
    <Tab id="files">Files</Tab>
    <Tab id="search">Search</Tab>
    <Tab id="settings">Settings</Tab>
  </TabList>
  <TabSelectionIndicator />
  <TabPanelCarousel>
    <TabPanel id="home" shouldForceMount>
      <p className="font-bold">Home</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
    <TabPanel id="files" shouldForceMount>
      <p className="font-bold">Files</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
    <TabPanel id="search" shouldForceMount>
      <p className="font-bold">Search</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
    <TabPanel id="settings" shouldForceMount>
      <p className="font-bold">Settings</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
    </TabPanel>
  </TabPanelCarousel>
</Tabs>
```

## Components

<ComponentList
  pages={props.pages}
  components={[
    'react-aria/Tabs'
  ]} />
